import { StyleSheet, Text, View, TouchableOpacity, FlatList } from 'react-native';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import FastImage from '@d11/react-native-fast-image';
import { useCameraPermission } from 'react-native-vision-camera';
import { useRoute, useNavigation } from '@react-navigation/native';
import { NavBarHeader } from '~/components';
import BleConnection from '~/utils/ble/connect';
import { onePx, px2dp, scale, width } from '~/utils/px2dp';
import { deviceStore, observer } from '~/store';
import { yjhDevices } from '~/utils/deviceMenues';
import RippleAnimation from './RippleAnimation';

const Bleconnect = BleConnection.getInstance();
export default observer(() => {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const router: any = useRoute();
    const { device_sn } = router.params || {};
    const searchDevices = deviceStore.device.searchDevices || [];
    const { hasPermission, requestPermission } = useCameraPermission();
    const scaleDevice = () => {
        if (hasPermission) {
            navigation.navigate('ScanBleDevice', { type: 'replace', yyDevice_sn: device_sn });
        } else {
            requestPermission();
        }
    };

    useEffect(() => {
        Bleconnect.scan(5);
    }, []);
    const renderItem = ({ item, index }) => {
        if (yjhDevices.indexOf(item.device_code) == -1) return null;
        return (
            <View style={[styles.listItem, styles.row, styles.between]}>
                <View style={[styles.row]}>
                    <FastImage
                        style={styles.device_icons}
                        source={{
                            uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/02/ac25e20250224170209347.png',
                            priority: FastImage.priority.high,
                        }}
                        resizeMode={FastImage.resizeMode.contain}
                    />
                    <View style={{ marginLeft: px2dp(24) }}>
                        <Text style={styles.deviceName}>
                            {item.prevName}
                            {t('AddDeviceScreen.t11')}
                        </Text>
                        <Text>SN：{item.device_sn}</Text>
                    </View>
                </View>
                <TouchableOpacity
                    style={styles.bt}
                    onPress={() => {
                        navigation.navigate('ReplaceDeviceForm', { yyDevice_sn: device_sn, device_sn: item.device_sn });
                    }}>
                    <Text style={styles.bt_text}>{t('AddDeviceScreen.t12')}</Text>
                </TouchableOpacity>
            </View>
        );
    };
    return (
        <View style={styles.container}>
            <NavBarHeader title=" " />
            <View style={styles.content}>
                <View style={[styles.row, styles.between, { marginTop: scale(32) }]}>
                    <Text style={styles.title}>{t('ReplaceDevice.t1')}</Text>
                    {/* <TouchableOpacity onPress={scaleDevice}>
                        <Icon name={'scan-sharp'} size={px2dp(40)} color={'#666666'}></Icon>
                    </TouchableOpacity> */}
                </View>
                <Text style={styles.tips}>{t('AddDeviceScreen.t7')}</Text>
                {searchDevices.length > 0 ? (
                    <FlatList
                        contentContainerStyle={styles.contentContainerStyle}
                        showsVerticalScrollIndicator={false}
                        data={searchDevices}
                        keyExtractor={(item) => item.id}
                        renderItem={renderItem}
                    />
                ) : (
                    <View style={styles.postionScan}>
                        <RippleAnimation />
                        <FastImage
                            style={styles.card_icons}
                            source={{
                                uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/02/39df2202502221726497519.png',
                                priority: FastImage.priority.high,
                            }}
                            resizeMode={FastImage.resizeMode.contain}
                        />
                        <Text style={styles.tips1}>{t('AddDeviceScreen.t6')}</Text>
                    </View>
                )}
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    contentContainerStyle: {
        flexGrow: 1,
        marginTop: px2dp(64),
        paddingBottom: '30%',
    },
    title: {
        fontSize: scale(40),
        fontWeight: 'bold',
        color: '#111111',
    },
    content: {
        marginHorizontal: px2dp(24),
        position: 'relative',
    },
    tips: {
        color: '#666666',
        fontSize: scale(28),
        marginTop: px2dp(24),
    },
    tips1: {
        color: '#666666',
        fontSize: scale(28),
        textAlign: 'center',
        top: '32%',
    },
    card_icons: {
        height: px2dp(202),
        width: px2dp(172),
        alignSelf: 'center',
        top: '30%',
    },
    postionScan: {
        width: width - px2dp(48),
        position: 'absolute',
        top: px2dp(300),
    },
    listItem: {
        marginTop: px2dp(24),
        paddingBottom: px2dp(24),
        borderBottomWidth: onePx,
        borderColor: '#eee',
    },
    deviceName: {
        color: '#000',
        fontSize: scale(26),
        fontWeight: 'bold',
        marginBottom: px2dp(12),
    },
    bt: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#25C8C8',
        height: px2dp(60),
        marginTop: px2dp(32),
        borderRadius: px2dp(100),
        width: px2dp(120),
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(28),
    },
    device_icons: {
        width: px2dp(120),
        height: px2dp(120),
    },
});
